<template>
    <div class="components container">
        <Alert v-if="alert" :msg="alert"></Alert>
        <h4 class="page-header">用户信息</h4>
        <input type="text" class="form-control" placeholder="请输入搜索条件" v-model="filterInput">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="customer in filterBy(customers,filterInput)">
                    <td>{{customer.name}}</td>
                    <td>{{customer.phone}}</td>
                    <td>{{customer.email}}</td>
                    <td>
                        <router-link class="btn btn-default" :to="'/customer/'+customer.id">查看详情</router-link>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import Alert from "./Alert"
export default {
    name: "components",
    data() {
        return {
            customers:[],
            alert:'',
            filterInput:''
        };
    },
    created() {
        if(this.$route.query.alert){
            this.alert = this.$route.query.alert;
        }
        this.funCustomers();
    },
    updated() {
        this.funCustomers();
    },
    components:{
        Alert
    },
    methods: {
        funCustomers(){
            this.$http.get("http://localhost:3010/users").then(function(response){
              this.customers = response.body;
            })
        },
        filterBy(customers,value){
            return customers.filter(function(customer){
                return customer.name.match(value);
            })
        }
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
